<template>
  <i-biz-tabs :class="[ns.b()]" v-model="tab">
    <template v-for="tabpage in modelData.deformTabPages" :key="tabpage.id">
      <i-biz-tab
        v-if="isVisible(tabpage.id)"
        :class="ns.b('tab-item')"
        :title="tabpage.caption"
        :name="tabpage.id"
      >
        <i-biz-form-tab-page
          :modelData="tabpage"
          :controller="calcController(tabpage.id)"
        >
        </i-biz-form-tab-page>
      </i-biz-tab>
    </template>
  </i-biz-tabs>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script lang="ts" setup>
import { IDEFormTabPanel } from "@ibiz/model-core";
import { PropType, ref } from "vue";
import {
  FormTabPageController,
  FormTabPanelController,
} from "@ibiz-template/runtime";
import { useController, useNamespace } from "@/use";

const props = defineProps({
  modelData: {
    type: Object as PropType<IDEFormTabPanel>,
    required: true,
  },
  controller: {
    type: FormTabPanelController,
    required: true,
  },
});
const ns = useNamespace("form-tab-panel");
useController(props.controller);
const tab = ref<number | string>(props.modelData.deformTabPages?.[0].id!);

// 计算子分页控制器
const calcController = (id: string) => {
  const c = props.controller.form.details[id];
  return c as FormTabPageController;
};

// 是否显示
const isVisible = (id: string) => {
  const curController = calcController(id);
  return curController.state.visible || curController.state.keepAlive;
};
</script>
<style lang="scss">
@include b(form-tab-panel) {
  width: 100%;
  height: 100%;
  overflow: auto;

  @include e(caption) {
    @include flex(row, center, center);
  }
}
</style>
